<template>
  <div>
    <div style="margin-bottom: 16px" class="process-input-space">
      <a-row type="flex" :gutter="10">
        <a-col :span="4">
          <a-input placeholder="流程定义ID" />
        </a-col>
        <a-col :span="4">
          <a-input placeholder="任务ID" />
        </a-col>
        <a-col :span="4">
          <a-input placeholder="任务名称" />
        </a-col>
        <a-col :span="4">
          <a-input placeholder="业务主键" />
        </a-col>
        <a-col :span="4">
          <a-input placeholder="任务描述" />
        </a-col>
      </a-row>
      <a-row type="flex" :gutter="10">
        <a-col :span="4">
          <a-input placeholder="执行人" />
        </a-col>
        <a-col :span="4">
          <a-input placeholder="所有人" />
        </a-col>
        <a-col :span="4">
          <a-input placeholder="干系人" />
        </a-col>
        <a-col :span="4">
          <a-cascader style="width: 100%" :options="options" placeholder="任务已完成" />
        </a-col>
        <a-col :span="4">
          <a-cascader style="width: 100%" :options="options" placeholder="流程已完成" />
        </a-col>
      </a-row>
      <a-row type="flex" :gutter="10">
        <a-col :span="4">
          <a-input placeholder="父任务ID" />
        </a-col>
        <a-col :span="4">
          <a-date-picker style="width: 100%" placeholder="到期日开始" />
        </a-col>
        <a-col :span="4">
          <a-date-picker style="width: 100%" placeholder="到期日结束" />
        </a-col>
        <a-col :span="4">
          <a-date-picker style="width: 100%" placeholder="创建时间开始" />
        </a-col>
        <a-col :span="4">
          <a-date-picker style="width: 100%" placeholder="创建时间结束" />
        </a-col>
      </a-row>
      <a-row type="flex" :gutter="10">
        <a-col :span="4">
          <a-date-picker style="width: 100%" placeholder="创建时间结束" />
        </a-col>
        <a-col :span="4">
          <a-date-picker style="width: 100%" placeholder="创建时间结束" />
        </a-col>
        <a-col :span="6">
          <a-button-group>
            <a-button type="primary">
              <a-icon type="search" />查询
            </a-button>
            <a-button type="primary">重置</a-button>
          </a-button-group>
        </a-col>
      </a-row>
    </div>
    <a-table :columns="columns" :data-source="data">
      <span slot="tags" slot-scope="tags">
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
        >{{ tag.toUpperCase() }}</a-tag>
      </span>
      <span slot="action" slot-scope="action">
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            操作
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item key="0">
              <a @click="a(action)">
                <a-icon type="eye" class="dropdown-cion" />查看
              </a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="1">
              <a @click="a(action)">
                <a-icon type="eye" class="dropdown-cion" />查看详情
              </a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: "流程实例名称",
    dataIndex: "processName",
    scopedSlots: { customRender: "processName" }
  },
  {
    title: "任务名称",
    dataIndex: "taskNmae"
  },
  {
    title: "开始时间",
    dataIndex: "startTime"
  },
  {
    title: "结束时间",
    dataIndex: "endTime"
  },
  {
    title: "所有人",
    dataIndex: "belongs"
  },
  {
    title: "执行人",
    dataIndex: "executor"
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];
const processinstanceStatus = [
  {
    value: "yes",
    label: "是"
  },
  {
    value: "no",
    label: "否"
  }
];
const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    processName: `流程名称${i}`,
    taskNmae: `任务名称${i}`,
    startTime: `2020-06-01 13:11:${i}`,
    endTime: `2020-06-01 13:11:${i}`,
    belongs: `所有人${i}`,
    executor: `admin${i}`
  });
}

export default {
  data() {
    return {
      processinstanceStatus,
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    a(data) {
      console.log(data);
      alert(data.processName);
    }
  }
};
</script>


<style lang="scss" scoped>
.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}
.dropdown-cion {
  margin-right: 10px;
}
.process-input-space {
  line-height: 40px;
}
</style>